<template>
  <div class="orders-page">
    <!-- 统计卡片 -->
    <a-row :gutter="16" class="mb-4">
      <a-col :span="6" v-for="stat in orderStats" :key="stat.title">
        <a-card class="stat-card" :loading="loading">
          <div class="stat-content">
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-compare">
              较昨日
              <span :class="stat.trend >= 0 ? 'trend-up' : 'trend-down'">
                {{ stat.trend >= 0 ? "+" : "" }}{{ stat.trend }}%
                <icon-up v-if="stat.trend >= 0" />
                <icon-down v-else />
              </span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 搜索区域 -->
    <a-card class="search-card" :bordered="false">
      <a-form :model="searchForm" layout="inline">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item field="keyword" label="订单搜索">
              <a-input
                v-model="searchForm.keyword"
                placeholder="订单号/商品名称/买家"
                allow-clear
              >
                <template #prefix>
                  <icon-search />
                </template>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="status" label="订单状态">
              <a-select
                v-model="searchForm.status"
                placeholder="请选择状态"
                allow-clear
              >
                <a-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  <template #icon>
                    <div
                      class="status-dot"
                      :style="{ backgroundColor: getStatusColor(item.value) }"
                    ></div>
                  </template>
                  {{ item.label }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="dateRange" label="下单时间">
              <a-range-picker
                v-model="searchForm.dateRange"
                style="width: 100%"
                :shortcuts="dateShortcuts"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="type" label="订单类型">
              <a-select
                v-model="searchForm.type"
                placeholder="请选择类型"
                allow-clear
              >
                <a-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-space>
              <a-button type="primary" @click="handleSearch">
                <template #icon><icon-search /></template>
                搜索
              </a-button>
              <a-button @click="handleReset">
                <template #icon><icon-refresh /></template>
                重置
              </a-button>
              <a-button type="text" @click="showAdvanced = !showAdvanced">
                {{ showAdvanced ? "收起" : "展开" }}
                <icon-up v-if="showAdvanced" />
                <icon-down v-else />
              </a-button>
            </a-space>
          </a-col>
        </a-row>

        <!-- 高级搜索 -->
        <div v-show="showAdvanced" class="advanced-search">
          <a-row :gutter="16">
            <a-col :span="6">
              <a-form-item field="paymentMethod" label="支付方式">
                <a-select
                  v-model="searchForm.paymentMethod"
                  placeholder="请选择支付方式"
                  allow-clear
                >
                  <a-option value="wechat">微信支付</a-option>
                  <a-option value="alipay">支付宝</a-option>
                  <a-option value="unionpay">银联支付</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item field="amount" label="订单金额">
                <a-input-number-range
                  v-model="searchForm.amount"
                  placeholder="最小金额 - 最大金额"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item field="source" label="订单来源">
                <a-select
                  v-model="searchForm.source"
                  placeholder="请选择来源"
                  allow-clear
                >
                  <a-option value="pc">电脑端</a-option>
                  <a-option value="mobile">手机端</a-option>
                  <a-option value="app">APP</a-option>
                  <a-option value="miniprogram">小程序</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item field="tags" label="订单标签">
                <a-select
                  v-model="searchForm.tags"
                  placeholder="请选择标签"
                  allow-clear
                  multiple
                >
                  <a-option value="vip">VIP订单</a-option>
                  <a-option value="new">新客订单</a-option>
                  <a-option value="urgent">加急订单</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-card>

    <!-- 订单列表 -->
    <a-card class="list-card" :bordered="false">
      <!-- 工具栏 -->
      <template #title>
        <div class="toolbar">
          <div class="left">
            <a-space>
              <a-button
                type="primary"
                status="success"
                :disabled="!selectedOrders.length"
                @click="handleBatchDeliver"
              >
                <template #icon><icon-send /></template>
                批量发货
              </a-button>
              <a-button
                type="primary"
                status="warning"
                :disabled="!selectedOrders.length"
                @click="handleBatchPrint"
              >
                <template #icon><icon-printer /></template>
                批量打印
              </a-button>
              <a-button type="primary" @click="handleExport">
                <template #icon><icon-download /></template>
                导出订单
              </a-button>
            </a-space>
          </div>
          <div class="right">
            <a-space>
              <a-button type="text" @click="handleRefresh">
                <template #icon><icon-refresh /></template>
                刷新
              </a-button>
              <a-button type="text" @click="handleColumnSetting">
                <template #icon><icon-settings /></template>
                列设置
              </a-button>
              <a-dropdown @select="handleTableSize">
                <a-button type="text">
                  <template #icon><icon-list /></template>
                  密度
                </a-button>
                <template #content>
                  <a-doption value="large">宽松</a-doption>
                  <a-doption value="medium">中等</a-doption>
                  <a-doption value="small">紧凑</a-doption>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </div>
      </template>

      <!-- 订单表格 -->
      <a-table
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        :loading="loading"
        :row-selection="rowSelection"
        :size="tableSize"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        @selection-change="handleSelectionChange"
        @sorter-change="handleSort"
      >
        <!-- 订单信息列 -->
        <template #order="{ record }">
          <div class="order-info">
            <div class="order-id">
              {{ record.orderNo }}
              <a-tag v-if="record.tags?.includes('vip')" color="gold"
                >VIP</a-tag
              >
              <a-tag v-if="record.tags?.includes('urgent')" color="red"
                >加急</a-tag
              >
            </div>
            <div class="order-time">{{ record.createTime }}</div>
            <div class="order-source">
              <icon-mobile v-if="record.source === 'mobile'" />
              <icon-computer v-if="record.source === 'pc'" />
              <span class="source-text">{{
                getSourceText(record.source)
              }}</span>
            </div>
          </div>
        </template>

        <!-- 商品信息列 -->
        <template #products="{ record }">
          <div class="products-info">
            <div
              v-for="(product, index) in record.products"
              :key="index"
              class="product-item"
            >
              <div class="product-image">
                <a-image
                  :src="product.image"
                  :width="60"
                  :height="60"
                  fit="cover"
                />
              </div>
              <div class="product-detail">
                <div class="product-name">{{ product.name }}</div>
                <div class="product-spec">{{ product.spec }}</div>
                <div class="product-price">
                  <span class="price">¥{{ product.price }}</span>
                  <span class="quantity">x{{ product.quantity }}</span>
                </div>
              </div>
            </div>
            <div v-if="record.products.length > 1" class="product-count">
              共{{ record.products.length }}件商品
            </div>
          </div>
        </template>

        <!-- 买家信息列 -->
        <template #buyer="{ record }">
          <div class="buyer-info">
            <div class="buyer-name">
              {{ record.buyer.name }}
              <a-tag v-if="record.buyer.isNew" color="blue">新客户</a-tag>
            </div>
            <div class="buyer-phone">{{ record.buyer.phone }}</div>
            <div class="buyer-level" v-if="record.buyer.level">
              <icon-user /> {{ record.buyer.level }}
            </div>
          </div>
        </template>

        <!-- 收货信息列 -->
        <template #shipping="{ record }">
          <div class="shipping-info">
            <div class="shipping-address">
              <icon-location /> {{ record.shipping.address }}
            </div>
            <div v-if="record.shipping.express" class="shipping-express">
              <icon-send /> {{ record.shipping.express.company }}:
              {{ record.shipping.express.number }}
            </div>
          </div>
        </template>

        <!-- 订单金额列 -->
        <template #amount="{ record }">
          <div class="amount-info">
            <div class="total-amount">¥{{ record.totalAmount }}</div>
            <div class="payment-method">
              <icon-wallet /> {{ record.paymentMethod }}
            </div>
            <div v-if="record.discountAmount > 0" class="discount-amount">
              优惠: -¥{{ record.discountAmount }}
            </div>
          </div>
        </template>

        <!-- 订单状态列 -->
        <template #status="{ record }">
          <div class="status-info">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
            <div v-if="record.status === 'refunding'" class="refund-info">
              <icon-exclamation-circle-fill /> {{ record.refundReason }}
            </div>
          </div>
        </template>

        <!-- 操作列 -->
        <template #operations="{ record }">
          <a-space direction="vertical" :size="8">
            <a-button type="text" size="small" @click="handleDetail(record)">
              订单详情
            </a-button>

            <template v-if="record.status === 'pending'">
              <a-button
                type="text"
                size="small"
                status="success"
                @click="handleDeliver(record)"
              >
                发货
              </a-button>
            </template>

            <template v-if="record.status === 'refunding'">
              <a-button
                type="text"
                size="small"
                status="warning"
                @click="handleRefund(record)"
              >
                退款处理
              </a-button>
            </template>

            <a-dropdown>
              <a-button type="text" size="small">
                更多
                <template #icon><icon-down /></template>
              </a-button>
              <template #content>
                <a-doption @click="handlePrint(record)">
                  <template #icon><icon-printer /></template>
                  打印订单
                </a-doption>
                <a-doption @click="handleRemark(record)">
                  <template #icon><icon-edit /></template>
                  添加备注
                </a-doption>
                <a-doption @click="handleLog(record)">
                  <template #icon><icon-history /></template>
                  操作日志
                </a-doption>
                <a-divider style="margin: 4px 0" />
                <a-doption @click="handleCopy(record)">
                  <template #icon><icon-copy /></template>
                  复制订单号
                </a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 发货弹窗 -->
    <a-modal
      v-model:visible="deliverVisible"
      title="订单发货"
      @ok="handleDeliverSubmit"
      @cancel="handleDeliverCancel"
    >
      <a-form :model="deliverForm" layout="vertical">
        <a-form-item field="company" label="快递公司" required>
          <a-select
            v-model="deliverForm.company"
            placeholder="请选择快递公司"
            allow-clear
          >
            <a-option
              v-for="item in expressOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="number" label="快递单号" required>
          <a-input
            v-model="deliverForm.number"
            placeholder="请输入快递单号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="remark" label="发货备注">
          <a-textarea
            v-model="deliverForm.remark"
            placeholder="请输入发货备注"
            :max-length="200"
            show-word-limit
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 备注弹窗 -->
    <a-modal
      v-model:visible="remarkVisible"
      title="订单备注"
      @ok="handleRemarkSubmit"
      @cancel="handleRemarkCancel"
    >
      <a-form :model="remarkForm" layout="vertical">
        <a-form-item field="content" label="备注内容">
          <a-textarea
            v-model="remarkForm.content"
            placeholder="请输入备注内容"
            :max-length="500"
            show-word-limit
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 列设置抽屉 -->
    <a-drawer
      v-model:visible="columnSettingVisible"
      title="列设置"
      width="300"
      @ok="handleColumnSettingSubmit"
    >
      <a-space direction="vertical" style="width: 100%">
        <a-alert type="info"> 拖动列表项可以调整列的显示顺序 </a-alert>
        <div class="column-list">
          <draggable
            v-model="columnSettings"
            item-key="dataIndex"
            handle=".column-drag"
          >
            <template #item="{ element }">
              <div class="column-item">
                <span class="column-drag">
                  <icon-drag-dot-vertical />
                </span>
                <a-checkbox v-model="element.visible">
                  {{ element.title }}
                </a-checkbox>
              </div>
            </template>
          </draggable>
        </div>
      </a-space>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import draggable from "vuedraggable";
import {
  IconSearch,
  IconRefresh,
  IconDown,
  IconUp,
  IconSend,
  IconPrinter,
  IconDownload,
  IconSettings,
  IconList,
  IconMobile,
  IconComputer,
  IconLocation,
  IconWallet,
  IconUser,
  IconEdit,
  IconHistory,
  IconCopy,
  IconDragDotVertical,
  IconExclamationCircleFill,
} from "@arco-design/web-vue/es/icon";

const router = useRouter();
const loading = ref(false);
const showAdvanced = ref(false);
const tableSize = ref("medium");

// 订单统计数据
const orderStats = ref([
  {
    title: "今日订单",
    value: 126,
    trend: 12.5,
    color: "blue",
  },
  {
    title: "待处理订单",
    value: 38,
    trend: -5.2,
    color: "orange",
  },
  {
    title: "已完成订单",
    value: 284,
    trend: 8.5,
    color: "green",
  },
  {
    title: "退款订单",
    value: 12,
    trend: 2.1,
    color: "red",
  },
]);

// 搜索表单
const searchForm = reactive({
  keyword: "",
  status: "",
  dateRange: [],
  type: "",
  paymentMethod: "",
  amount: [],
  source: "",
  tags: [],
});

// 日期快捷选项
const dateShortcuts = [
  {
    label: "今日",
    value: () => [new Date(), new Date()],
  },
  {
    label: "昨日",
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return [date, date];
    },
  },
  {
    label: "最近7天",
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return [date, new Date()];
    },
  },
  {
    label: "最近30天",
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 30);
      return [date, new Date()];
    },
  },
];

// 列设置
const columnSettingVisible = ref(false);
const columnSettings = ref([
  {
    title: "订单信息",
    dataIndex: "order",
    visible: true,
    sortInfo: [
      { field: "orderNo", title: "订单号" },
      { field: "createTime", title: "创建时间" },
    ],
  },
  {
    title: "商品信息",
    dataIndex: "products",
    visible: true,
    sortInfo: [
      { field: "productName", title: "商品名称" },
      { field: "productPrice", title: "商品价格" },
    ],
  },
  {
    title: "买家信息",
    dataIndex: "buyer",
    visible: true,
    sortInfo: [{ field: "buyerName", title: "买家姓名" }],
  },
  {
    title: "收货信息",
    dataIndex: "shipping",
    visible: true,
  },
  {
    title: "订单金额",
    dataIndex: "amount",
    visible: true,
    sortInfo: [{ field: "totalAmount", title: "总金额" }],
  },
  {
    title: "订单状态",
    dataIndex: "status",
    visible: true,
    sortInfo: [{ field: "status", title: "状态" }],
  },
  {
    title: "操作",
    dataIndex: "operations",
    visible: true,
  },
]);

// 表格列配置
const columns = computed(() => {
  return columnSettings.value
    .filter((col) => col.visible)
    .map((col) => {
      const baseColumn = {
        title: col.title,
        dataIndex: col.dataIndex,
        slotName: col.dataIndex,
        width: getColumnWidth(col.dataIndex),
        fixed: getColumnFixed(col.dataIndex),
      };

      // 为可排序的列添加排序配置
      if (col.sortInfo) {
        baseColumn.sortable = {
          sortDirections: ["ascend", "descend", "none"],
          sorter: true,
          sortField: col.sortInfo[0].field, // 默认使用第一个字段排序
        };
      }

      return baseColumn;
    });
});

// 获取列宽度
const getColumnWidth = (dataIndex) => {
  const widthMap = {
    order: 200,
    products: 300,
    buyer: 150,
    shipping: 200,
    amount: 150,
    status: 120,
    operations: 120,
  };
  return widthMap[dataIndex];
};

// 获取列固定位置
const getColumnFixed = (dataIndex) => {
  if (dataIndex === "order") return "left";
  if (dataIndex === "operations") return "right";
  return undefined;
};

// 获取来源文本
const getSourceText = (source) => {
  const sourceMap = {
    pc: "电脑端",
    mobile: "手机端",
    app: "APP",
    miniprogram: "小程序",
  };
  return sourceMap[source] || "未知来源";
};

// 处理表格大小切换
const handleTableSize = (size) => {
  tableSize.value = size;
};

// 处理列设置
const handleColumnSetting = () => {
  columnSettingVisible.value = true;
};

// 确认列设置
const handleColumnSettingSubmit = () => {
  columnSettingVisible.value = false;
  // TODO: 保存列设置到本地存储
};

// 处理复制订单号
const handleCopy = (record) => {
  navigator.clipboard.writeText(record.orderNo);
  Message.success("订单号已复制");
};

// 处理刷新
const handleRefresh = () => {
  loading.value = true;
  // TODO: 重新加载数据
  setTimeout(() => {
    loading.value = false;
    Message.success("数据已刷新");
  }, 1000);
};

// 处理搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log("搜索条件：", searchForm);
};

// 处理重置
const handleReset = () => {
  searchForm.keyword = "";
  searchForm.status = "";
  searchForm.dateRange = [];
  searchForm.type = "";
};

// 处理导出
const handleExport = () => {
  Message.success("开始导出订单数据");
};

// 处理分页变化
const handlePageChange = (current) => {
  pagination.current = current;
};

const handlePageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
};

// 处理订单详情
const handleDetail = (record) => {
  router.push(`/merchant/orders/${record.id}`);
};

// 处理发货
const handleDeliver = (record) => {
  currentOrder.value = record;
  deliverVisible.value = true;
};

// 处理批量发货
const handleBatchDeliver = () => {
  Message.warning("批量发货功能开发中");
};

// 处理打印
const handlePrint = (record) => {
  Message.success("开始打印订单");
};

// 处理批量打印
const handleBatchPrint = () => {
  Message.warning("批量打印功能开发中");
};

// 处理退款
const handleRefund = (record) => {
  router.push(`/merchant/orders/refund/${record.id}`);
};

// 处理备注
const handleRemark = (record) => {
  currentOrder.value = record;
  remarkForm.content = record.remark || "";
  remarkVisible.value = true;
};

// 处理操作日志
const handleLog = (record) => {
  router.push(`/merchant/orders/log/${record.id}`);
};

// 提交发货
const handleDeliverSubmit = async () => {
  try {
    // TODO: 调用发货API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("发货成功");
    deliverVisible.value = false;
  } catch (error) {
    Message.error("发货失败");
  }
};

// 取消发货
const handleDeliverCancel = () => {
  deliverForm.company = "";
  deliverForm.number = "";
  currentOrder.value = null;
  deliverVisible.value = false;
};

// 提交备注
const handleRemarkSubmit = async () => {
  try {
    // TODO: 调用保存备注API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("保存成功");
    remarkVisible.value = false;
  } catch (error) {
    Message.error("保存失败");
  }
};

// 取消备注
const handleRemarkCancel = () => {
  remarkForm.content = "";
  currentOrder.value = null;
  remarkVisible.value = false;
};

// 修改排序处理方法
const handleSort = (data) => {
  if (!data) return;

  const { field, direction } = data;
  if (!field || !direction) return;

  loading.value = true;

  try {
    tableData.value.sort((a, b) => {
      let compareA = getSortValue(a, field);
      let compareB = getSortValue(b, field);

      // 根据字段类型进行适当的转换
      if (["totalAmount", "productPrice"].includes(field)) {
        compareA = parseFloat(compareA) || 0;
        compareB = parseFloat(compareB) || 0;
      } else if (["createTime"].includes(field)) {
        compareA = new Date(compareA).getTime();
        compareB = new Date(compareB).getTime();
      }

      // 处理空值
      if (compareA === null || compareA === undefined) return 1;
      if (compareB === null || compareB === undefined) return -1;

      // 根据排序方向返回比较结果
      if (direction === "ascend") {
        return compareA > compareB ? 1 : -1;
      } else if (direction === "descend") {
        return compareA < compareB ? 1 : -1;
      }
      return 0;
    });
  } finally {
    loading.value = false;
  }
};

// 优化获取排序值的方法
const getSortValue = (record, field) => {
  switch (field) {
    case "orderNo":
      return record.orderNo;
    case "createTime":
      return record.createTime;
    case "productName":
      return record.products?.[0]?.name || "";
    case "productPrice":
      return record.products?.[0]?.price || 0;
    case "buyerName":
      return record.buyer?.name || "";
    case "totalAmount":
      return parseFloat(record.totalAmount) || 0;
    case "status":
      return record.status;
    default:
      return "";
  }
};
</script>

<style lang="less" scoped>
.orders-page {
  .stat-card {
    .stat-content {
      .stat-title {
        font-size: 14px;
        color: var(--color-text-2);
      }

      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: var(--color-text-1);
        margin: 8px 0;
      }

      .stat-compare {
        font-size: 13px;
        color: var(--color-text-3);

        .trend-up {
          color: rgb(var(--success-6));
        }

        .trend-down {
          color: rgb(var(--danger-6));
        }
      }
    }
  }

  .search-card {
    margin-bottom: 16px;

    .advanced-search {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px dashed var(--color-border);
    }
  }

  .list-card {
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .order-info {
      .order-id {
        font-weight: 500;
        margin-bottom: 4px;
      }

      .order-time {
        font-size: 12px;
        color: var(--color-text-3);
      }

      .order-source {
        display: flex;
        align-items: center;
        margin-top: 4px;
        font-size: 12px;
        color: var(--color-text-3);

        .source-text {
          margin-left: 4px;
        }
      }
    }

    .products-info {
      .product-item {
        display: flex;
        padding: 8px 0;

        &:not(:last-child) {
          border-bottom: 1px dashed var(--color-border);
        }

        .product-image {
          margin-right: 12px;
        }

        .product-detail {
          flex: 1;

          .product-name {
            font-weight: 500;
            margin-bottom: 4px;
          }

          .product-spec {
            font-size: 12px;
            color: var(--color-text-3);
            margin-bottom: 4px;
          }

          .product-price {
            font-size: 12px;

            .price {
              color: rgb(var(--danger-6));
              margin-right: 8px;
            }

            .quantity {
              color: var(--color-text-3);
            }
          }
        }
      }

      .product-count {
        font-size: 12px;
        color: var(--color-text-3);
        margin-top: 8px;
      }
    }

    .buyer-info {
      .buyer-name {
        font-weight: 500;
        margin-bottom: 4px;
      }

      .buyer-phone {
        font-size: 12px;
        color: var(--color-text-3);
      }

      .buyer-level {
        font-size: 12px;
        color: var(--color-text-2);
        margin-top: 4px;
      }
    }

    .shipping-info {
      .shipping-address {
        margin-bottom: 4px;
      }

      .shipping-express {
        font-size: 12px;
        color: var(--color-text-3);
      }
    }

    .amount-info {
      .total-amount {
        font-weight: 500;
        color: rgb(var(--danger-6));
        margin-bottom: 4px;
      }

      .payment-method {
        font-size: 12px;
        color: var(--color-text-3);
      }

      .discount-amount {
        font-size: 12px;
        color: rgb(var(--success-6));
        margin-top: 4px;
      }
    }

    .status-info {
      .refund-info {
        font-size: 12px;
        color: rgb(var(--warning-6));
        margin-top: 4px;
      }
    }
  }

  .column-list {
    margin-top: 16px;

    .column-item {
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      cursor: move;

      &:hover {
        background-color: var(--color-fill-2);
      }

      .column-drag {
        margin-right: 8px;
        color: var(--color-text-3);
      }
    }
  }
}

// 状态点样式
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
}

// 暗色主题适配
:deep([arco-theme="dark"]) {
  .orders-page {
    .stat-card,
    .search-card,
    .list-card {
      background-color: var(--color-bg-2);
    }

    .advanced-search {
      border-top-color: var(--color-border);
    }

    .column-item:hover {
      background-color: var(--color-fill-3);
    }
  }
}
</style>
